<template>
  <div class="shop app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="true" titelText="咨询师"></header-nav>
    </div>

    <van-empty v-if="records.length == 0" description="广场上空空的" />
    <!-- 底部 -->
    <div class="records">
      <div class="record" v-for="record in records">
        <div style="display: flex;align-items: center;gap: 10px;margin-bottom: 10px;">
          <img class="avator" :src="record.avator" />
          <div class="name">{{ record.name }}</div>
        </div>
        <div>
          <div class="content">年龄：{{ record.age }}</div>
          <div class="content">性别：{{ record.sex }}</div>
        </div>
        <div class="fix" @click="chat(record)">咨询</div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script setup name="Record">
import { showDialog } from 'vant';
import moment from "moment";
import { showToast } from "vant"; // 引入提示组件

import { getUser } from "@/api/http.js";

const router = useRouter();
let records = ref([]); // 是否全选
let info = reactive({
  show: false,
  userInfo: {},
  show: false,
  showCld: false,
});

let form = reactive({
  time: "请选择日期",
  weight: "",
  foodin: "",
});

const getData = () => {
  getUser().then(res => {
    records.value = res.data.filter(v => v.role == 'teacher')
  })
}

const chat = (user) => {
  router.push(`/chat/${user.id}`);
}


onMounted(() => {
  getData()
});
</script>

<style lang="less" scoped>
.records {
  padding: 0 12px;
}
.records {
  width: 94%;
  height: 80vh;
  font-size: 14px;
  overflow: hidden;
  overflow-y: scroll;

  .record {
    background: #fff;
    padding: 12px;
    border-radius: 10px;
    margin-top: 10px;
  }

  .name {
    font-weight: bold;
  }
  .content {
    color: #333;
    margin-bottom: 10px;
  }
  .time {
    width: 100%;
    text-align: right;
    font-size: 12px;
  }
  .avator {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
}
.fix {
  font-size: 14px;
	width: 60px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	background: red;
	border-radius: 6px;
	color: #fff;
}
</style>
